<%--
  User: Shengzhao Li
  Date: 13-8-6
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>
<html>
<head>
    <title>Developer</title>
    <link href="${contextPath}/js/web/bootstrap/datepicker/datepicker.css" rel="stylesheet"/>
    <script src="${contextPath}/js/web/bootstrap/datepicker/bootstrap-datepicker.js"></script>

    <script src="${contextPath}/js/web/ckeditor/ckeditor.js"></script>
    <script src="${contextPath}/js/jquery/Chart/Chart.min.js"></script>
</head>
<body>
<c:set var="currSprint" value="${developerOverviewDto.currentSprint}"/>
<div class="row">
    <hr/>
    <div class="span3">
        <form action="" id="developerForm">
            <select name="currentSprint.guid" id="sprintSelect">
                <c:if test="${empty developerOverviewDto.sprintDtos}">
                    <option value="">--- No Sprints ---</option>
                </c:if>
                <c:forEach items="${developerOverviewDto.sprintDtosGroupResults}" var="group" varStatus="status">
                    <optgroup label="${group.key.label}">
                        <c:forEach items="${group.results}" var="sprint">
                            <option value="${sprint.guid}" ${sprint.guid eq currSprint.guid?'selected':''}>${sprint.name}</option>
                        </c:forEach>
                    </optgroup>
                </c:forEach>
            </select>
            <a href="javascript:void(0)" data-content="${currSprint.htmlTip}" id="sprintInfo"><i
                    class="icon-info-sign"></i></a>
            <input type="hidden" name="status" value="${developerOverviewDto.status}" id="taskStatus"/>
        </form>
    </div>
    <div class="span3">
        <c:set var="progressVal" value="${empty currSprint.usedTimeAsPercent?'0%':currSprint.usedTimeAsPercent}"/>
        <div class="progress progress-striped" title="${progressVal} finished"
             style="position: relative;top:5px;">
            <div class="bar" style="width: ${progressVal};"></div>
        </div>
    </div>
    <div class="span1">
        <span class="label" title="Current sprint status" style="margin-top: 5px;">${currSprint.status.label}</span>
    </div>
    <div class="span3 offset2">
        <c:if test="${empty currSprint or empty currSprint.guid}" var="emptySprint">
            <a class="btn btn-success btn-small" href="${contextPath}/developer/sprint_form/create"><i
                    class="icon-plus icon-white"></i> Create sprint</a>
        </c:if>
        <c:if test="${not emptySprint}">
            <c:set value="${currSprint.status.finished}" var="finished"/>
            <c:if test="${finished}">
                <a class="btn btn-success btn-small disabled" href="javascript:void(0);"><i
                        class="icon-plus icon-white"></i> Create task</a>
            </c:if>
            <c:if test="${not finished}">
                <a class="btn btn-success btn-small"
                   href="${contextPath}/developer/task_form/create?sprintGuid=${currSprint.guid}"><i
                        class="icon-plus icon-white"></i>
                    Create task</a>
            </c:if>

            <div class="btn-group">
                <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                    Action <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <custom:sprint_menu_actions currentSprint="${currSprint}"/>
                </ul>
            </div>
        </c:if>
    </div>
</div>
<div class="row">
    <div class="span12">
        <div class="alert alert-success hide">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <div><i class="icon-ok-sign icon-white"></i>
                <span id="archiveSprintSuccess" class="hide">Archive the sprint successful!</span>
                <span id="startSprintSuccess" class="hide">Start the sprint successful!</span>
                <span id="startTaskSuccess" class="hide">Start the task successful!</span>
                <span id="archiveTaskSuccess" class="hide">Archive the task successful!</span>
                <span id="cancelTaskSuccess" class="hide">Cancel the task successful!</span>
                <span id="restoreTaskSuccess" class="hide">Restore the task to Created successful!</span>
                <span id="revertTaskSuccess" class="hide">Revert the task successful!</span>
                <span id="finishTaskSuccess" class="hide">Finish the task successful!</span>
                <span id="addMeetingSuccess" class="hide">Add sprint meeting successful!</span>

            </div>
        </div>
        <div class="alert alert-info hide">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <div><i class="icon-info-sign icon-white"></i>
                <span id="taskFormSuccess" class="hide">Create/Edit the task successful!</span>
                <span id="finishSprintInfo" class="hide">The sprint has been finished.!</span>
                <span id="moveTaskInfo" class="hide">Move task has been finished.!</span>
            </div>
        </div>
        <div class="alert alert-error hide">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <div><i class="icon-warning-sign icon-white"></i>
                <%--<span id="alertErrorInfo"></span>--%>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="span9">
        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="${developerOverviewDto.status eq 'PENDING'?'active':''}">
                    <a href="#pending" class="taskTab" task-status="PENDING">Pending
                        (${developerOverviewDto.totalPendingTasks})</a>
                </li>
                <li class="${developerOverviewDto.status eq 'CREATED'?'active':''}">
                    <a href="#created" class="taskTab" task-status="CREATED">Created
                        (${developerOverviewDto.totalCreatedTasks})</a>
                </li>
                <li class="${developerOverviewDto.status eq 'FINISHED'?'active':''}">
                    <a href="#finished" class="taskTab" task-status="FINISHED">Finished
                        (${developerOverviewDto.totalFinishedTasks})</a>
                </li>
                <li class="${developerOverviewDto.status eq 'CANCELED'?'active':''}">
                    <a href="#canceled" class="taskTab" task-status="CANCELED">Canceled
                        (${developerOverviewDto.totalCanceledTasks})</a>
                </li>
                <li class="${empty developerOverviewDto.status?'active':''}">
                    <a href="#alltasks" class="taskTab" task-status="">All Tasks
                        (${developerOverviewDto.totalTasks})</a>
                </li>
            </ul>
            <div class="tab-content">
                <c:choose>
                    <c:when test="${developerOverviewDto.status eq 'PENDING'}">
                        <div class="tab-pane active" id="pending">
                            <custom:developer_pending_tasks developerOverviewDto="${developerOverviewDto}"/>
                        </div>
                    </c:when>
                    <c:when test="${developerOverviewDto.status eq 'CREATED'}">
                        <div class="tab-pane active" id="created">
                            <custom:developer_created_tasks developerOverviewDto="${developerOverviewDto}"/>
                        </div>
                    </c:when>
                    <c:when test="${developerOverviewDto.status eq 'FINISHED'}">
                        <div class="tab-pane active" id="finished">
                            <custom:developer_finished_tasks developerOverviewDto="${developerOverviewDto}"/>
                        </div>
                    </c:when>
                    <c:when test="${developerOverviewDto.status eq 'CANCELED'}">
                        <div class="tab-pane active" id="canceled">
                            <custom:developer_canceled_tasks developerOverviewDto="${developerOverviewDto}"/>
                        </div>
                    </c:when>
                    <c:when test="${empty developerOverviewDto.status}">
                        <div class="tab-pane active" id="alltasks">
                            <custom:developer_all_tasks developerOverviewDto="${developerOverviewDto}"/>
                        </div>
                    </c:when>
                </c:choose>
            </div>
        </div>
    </div>
    <div class="span3">
        <div class="well">
            <div>
                <a href="javascript:void(0);" id="burnDownDetailsId"
                   load-url="${contextPath}/developer/sprint_action/burndown/details/${currSprint.guid}"
                   class="pull-right"
                   title="Burn down details"><i class="icon-info-sign"></i></a>
                <h5><a href="javascript:void(0);">Burn down chart</a></h5>
            </div>

            <div>
                <canvas id="burnDownChart"></canvas>
            </div>

        </div>
        <div class="well">
            <div>
                <%--add meeting--%>
                <a href="javascript:void(0);" class="pull-right" title="Add meeting" id="meetingFormId"
                   load-url="${contextPath}/developer/sprint/meeting_form/create?sprintGuid=${currSprint.guid}"><i
                        class="icon-plus-sign"></i></a>
                <h5>
                    <a href="${contextPath}/developer/sprint_meeting/overview?sprintGuid=${currSprint.guid}">Meetings</a>
                </h5>
            </div>
            <div>
                <ul class="unstyled">
                    <c:if test="${empty developerOverviewDto.latestMeetings}" var="emptyMeetings">
                        <li>Not added meetings yet.</li>
                    </c:if>
                    <c:forEach items="${developerOverviewDto.latestMeetings}" var="meeting" varStatus="s">
                        <li>
                            <p>
                                <i class="icon-time icon-white"></i>
                                <a href="javascript:void(0);"
                                   load-url="${contextPath}/developer/sprint_meeting/details/${meeting.guid}"
                                   class="muted taskMeetingDetails">
                                        ${meeting.meetingDate} (${meeting.type.label})
                                </a>
                            </p>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <c:if test="${empty developerOverviewDto.status}">
            <div class="well">
                <div>
                    <h5><a href="javascript:void(0);">Legend</a></h5>
                </div>

                <div>
                    <table class="table">
                        <tr class="info">
                            <td>Pending</td>
                        </tr>
                        <tr class="success">
                            <td>Finished</td>
                        </tr>
                        <tr class="warning">
                            <td>Canceled</td>
                        </tr>
                        <tr style="background-color: white;">
                            <td>Created</td>
                        </tr>
                    </table>
                </div>
            </div>
        </c:if>
    </div>
</div>
<%--more row add in here--%>

<script type="text/javascript">
    $(function () {
        var labels = [];
        var expectDatas = [];
        var actualDatas = [];

        <c:set var="step_" value="${developerOverviewDto.burnDownWrapper.itemStep}"/>
        <c:forEach items="${developerOverviewDto.burnDownWrapper.burnDown.labels}" var="label" step="${step_}">
        labels.push('${label.dateAsDay}');
        </c:forEach>
        <c:forEach items="${developerOverviewDto.burnDownWrapper.burnDown.expectPoints}" var="exp" step="${step_}">
        expectDatas.push('${exp.expectRemainTime}');
        </c:forEach>
        <c:forEach items="${developerOverviewDto.burnDownWrapper.burnDown.actualPoints}" var="actual" step="${step_}">
        actualDatas.push('${actual.actualRemainTime}');
        </c:forEach>

        var developerHome = new DeveloperHome("${param.alert}");
        developerHome.initialChart(labels, expectDatas, actualDatas,
                ${developerOverviewDto.burnDownWrapper.chartSteps},
                ${developerOverviewDto.burnDownWrapper.chartStepWidth});
    });
</script>
</body>
</html>